import React from "react";
import { Form, Input, Modal } from "antd";
import { modalPropsType } from "@/constants/types";

const { Item } = Form;
const labelCol = {span: 6}

const UpdatePwd = ({visible, onSubmit, onCancel}: modalPropsType) => {
    const [form] = Form.useForm();

    const handleSubmit = async () => {
        const res = await form.validateFields();
        onSubmit(res);
    }

    return (
        <Modal
            open={visible}
            title="修改密码"
            onOk={handleSubmit}
            onCancel={onCancel}
            width="500px"
            maskClosable={false}
        >
           <Form form={form} labelCol={labelCol}> 
            <Item label="原密码" name="originalPassword" hasFeedback rules={[{required: true, message: '请输入原密码'}]}>
                    <Input.Password />
                </Item> 
                <Item label="新密码" name="newPassword" rules={[{required: true, message: '请输入新密码'}]}>
                    <Input.Password />
                </Item> 
                <Item label="确认新密码" name="newPasswordConfirm" hasFeedback rules={[{required: true, message: '请确认新密码'}, ({ getFieldValue }) => ({
                        validator(_, value) {
                        if (!value || getFieldValue('newPassword') === value) {
                            return Promise.resolve();
                        }
                        return Promise.reject(new Error('密码输入不一致!'));
                        },
                    })]}>
                    <Input.Password />
                </Item> 
           </Form>
        </Modal>
    );
}

export default UpdatePwd;